<template>
  <v-card class="prospect-form pb-4">
    <div class="justify-end align-center btn-container">
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-btn
            v-show="propShowAction"
            v-on="on"
            @click="openDelete"
            class="pa-0 mr-4"
            min-width="unset"
            width="16"
            height="16"
            color="transparent"
            depressed
          >
            <v-icon color="#79839B">mdi-delete</v-icon>
          </v-btn>
        </template>
        Delete Prospect
      </v-tooltip>
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-btn
            v-on="on"
            @click="openSaveProspect"
            class="pa-0 mr-4"
            min-width="unset"
            width="16"
            height="16"
            color="transparent"
            depressed
          >
            <v-icon color="#79839B">mdi-content-save</v-icon>
          </v-btn>
        </template>
        Save Prospect
      </v-tooltip>
    </div>
    <!-- 主体区域开始 -->
    <v-form ref="form" class="pl-4 pr-4 from">
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Prospect # </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.prospectNumber"
            v-validate="'required'"
            name="Prospect #"
            class="white-input-24"
            dense
            solo
            hide-details
            color="#fff"
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Prospect #") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Customer Name </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.customerName"
            v-validate="'required'"
            name="Customer Name"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Customer Name") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Contact Person </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.contactPerson"
            v-validate="'required'"
            name="Contact Person"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Contact Person") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Job Title </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.jobTitle"
            v-validate="'required'"
            name="Job Title"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Job Title") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Mobile #</v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.mobileNumber"
            v-validate="'required|mobile'"
            name="Mobile #"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Mobile #") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Work </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.work"
            v-validate="'required'"
            name="Work"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Work") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Fax </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.fax"
            v-validate="'required'"
            name="Fax"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Fax") }}
          </span>
        </v-col>
      </v-row>
      <v-row class="mt-4" no-gutters>
        <v-col cols="2" class="label">Email </v-col>
        <v-col cols="4" class="text-left">
          <v-text-field
            v-model="formData.email"
            v-validate="'required|email'"
            name="Email"
            class="white-input-24"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Email") }}
          </span>
        </v-col>
      </v-row>
    </v-form>
    <!-- 主体区域结束 -->
  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { IProspect } from "@/components/Customer/index";
@Component({
  components: {},
  props: {
    showAction: {
      type: Boolean,
      default: true,
    },
  },
})
export default class ProspectForm extends Vue {
  get propShowAction() {
    return this.$props.showAction;
  }
  formData = {
    id: "",
    prospectNumber: "",
    customerName: "",
    contactPerson: "",
    jobTitle: "",
    mobileNumber: "",
    work: "",
    fax: "",
    email: "",
  };
  openSaveProspect() {
    this.$emit("openSave");
  }

  openDelete() {
    this.$emit("openDelete");
  }

  resetForm() {
    this.formData.id = "";
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData(): IProspect {
    return JSON.parse(JSON.stringify(this.formData));
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Customer/Prospect/ProspectForm.scss";
</style>
